// base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
// less
import './index.less'

import {
  screenCheckMark,
  screenCheckedYellow,
  screenCheckGray,
  screenCheckBlack
} from '../../../../configuration/staticimg'

class BarLevelone extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentWillMount () {
    // onLoad
  }

  componentDidMount () {
    // onready
  }

  componentDidShow () {
    // onshow
  }

  componentDidHide () {
    // onhide
  }

  componentWillUnmount () {
    // onUnload
  }

  onChange = (index, e) => {
    this.props.onChange(index, e)
  }

  delay (time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }
  onClickScreen = e => {
    let index = e.currentTarget.dataset.index
    this.props.onClickScreen(index)
  }

  render () {
    const { screenTitle, screenIndex } = this.props
    return (
      <View className="BarLevelone_id29347">
        <View className="barleft">
          {this.props.dataSource.map((data, index) => {
            return (
              <View
                onClick={this.onChange.bind(this, index)}
                className={`tabsingle ${index == this.props.current ? 'tabsingleact' : ''}`}
                key={index}
              >
                <View className="tababs" />
                <Text>{data.title}</Text>
              </View>
            )
          })}
        </View>
        <View className="bar-screen">
          {screenTitle.map((item, index) => {
            return (
              <View
                className="screen-item"
                key={index}
                onClick={this.onClickScreen}
                data-index={index}
              >
                <Text className={`screen-text ${screenIndex === index ? 'active' : ''}`}>
                  {item.nickName || item.name}
                </Text>
                <Image
                  src={screenIndex === index ? screenCheckedYellow : screenCheckGray}
                  className="screen-img"
                />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
}

export default BarLevelone
